<template>

  <el-pagination
    class="page"
    :hide-on-single-page="true"
    layout="prev,pager,next,sizes,jumper"
    :total="total"
    background
    :current-page="current"
    :page-sizes="[10,20,30,40]"
    @current-change="pageChange"
    @size-change="sizeChange"
  >
  </el-pagination>
</template>

<script>
export default {
  name: "page",
  data() {
    return {
      obj: {
        size: 10,
        current: 1
      }
    };
  },
  props: {
    total: {
      type: Number,
      required: true
    },
    current: {
      type: Number,
      required: true
    },
    size: {
      type: Number,
      required: true
    }
  },
  methods: {
    pageChange(page) {
      this.obj.current = page;
      this.change(this.obj);
    },
    sizeChange(size) {
      this.obj.size = size;
      this.change(this.obj);
    },
    change(obj) {
      this.$emit("update:current", obj.current);
      this.$emit("update:size", obj.size);
      this.$emit("change", obj);
    }
  }
};
</script>
<style lang="scss">
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
    background-color: #fff;
    border-radius: 2px;
    border: solid 1px #e7e7e7;
}
</style>
